<script setup lang="js">
  import { ref, computed } from 'vue';
  import { ElMessage } from "element-plus";
  import request from '../../request/axios'
  import { projectBaseData } from '../../utils/comData.js'

  const messageList = ref([]);
  const messageDrawer = ref(false)
  const messageObj = ref({})

  const getMessageList = async (type) => {
    try {
      const res = await request.getV2({ url: 'v1/api-msg-list?page=1&pageNum=99&status=1' });
      if (type == 1) {
        projectBaseData['messageNum'] = computed(() => {
          return res.data.list.reduce((count, message) => {
            return message.notice_status == 1 ? count + 1 : count
          }, 0)
        })
        return
      }
      messageList.value = res.data.list || [];
    } catch (error) {
      console.log(error);
      ElMessage.error('获取消息列表失败');
    }
  }
  getMessageList();

  const clickMessage = async (message, index) => {
    messageDrawer.value = true
    messageObj.value = message
    const type = message.notice_type

    messageList.value[index].notice_status = 2
    await request.postV2({ url: 'v1/api-msg-upread?type=' + type + '&noticeid=' + message.id });
    getMessageList(1); // 刷新列表
  }

  // const markAllAsRead = async () => {
  //   try {
  //     await request.postV2({ url: 'v1/api-msg-read-all' });
  //     ElMessage.success('全部标记为已读成功');
  //     getMessageList(); // 刷新列表
  //   } catch (error) {
  //     console.log(error);
  //     ElMessage.error('标记已读失败');
  //   }
  // }

</script>

<template>
  <div class="content-message">
    <div class="message-header">
      <h2>消息中心</h2>
      <!-- <el-button type="primary" @click="markAllAsRead">一键已读</el-button> -->
    </div>

    <div class="message-list overflow-none">
      <div v-for="(message,index) in messageList" :key="message.id" @click="clickMessage(message,index)"
        class="message-item" :class="{ 'unread': message.notice_status }">
        <div class="message-title">{{ message.title }}</div>
        <div class="message-content">{{ message.content }}</div>
        <span class="message-status">{{ message.notice_status == 1 ? '未读' : '' }}</span>
      </div>
      <el-empty :image-size="200" description="暂无数据" v-if="messageList.length === 0" />
    </div>

    <el-drawer v-model="messageDrawer" :title="messageObj.title">
      <div class="message-popup" v-html="messageObj.content"></div>
    </el-drawer>


  </div>
</template>

<style scoped lang="scss">
  .message-popup {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-top: -20px;
  }

  .content-message {
    padding: 20px;

    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .message-list {
      width: 800px;
      height: 82vh;
      overflow-y: auto;

      .message-item {
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
        position: relative;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        &.unread {
          /* border-left: 3px solid #adadad; */
        }

        .message-title {
          font-weight: bold;
          margin-bottom: 8px;
        }

        .message-content {
          color: #666;
          font-size: 14px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 8px;
        }

        .message-status {
          color: #adadad;
          font-size: 12px;
          color: #999;
          position: absolute;
          top: 20px;
          right: 20px;
        }
      }
    }
  }
</style>